import React, { useState } from 'react';
import { apiService } from '../services/api';

interface UserAccountData {
  id?: number;
  username?: string;
  email?: string;
  phone?: string;
  avatar?: string;
  created_at?: string;
  updated_at?: string;
  // 根据实际API返回的数据结构添加更多字段
}

const UserAccountData: React.FC = () => {
  const [accountData, setAccountData] = useState<UserAccountData | null>(null);
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);
  const [requestData, setRequestData] = useState({
    user_id: '',
    // 可以根据API需求添加更多请求参数
  });

  const fetchAccountData = async () => {
    if (!requestData.user_id.trim()) {
      setError('请提供用户ID');
      return;
    }

    setLoading(true);
    setError(null);
    try {
      // 调用POST接口获取个人账号数据
      const response = await apiService.getUserAccountData({
        user_id: requestData.user_id,
        // 可以添加其他需要的参数
      });
      
      // 假设API返回的数据在response.data中
      const data = response.data || response;
      setAccountData(data);
    } catch (err) {
      console.error('获取个人账号数据失败:', err);
      setError('获取个人账号数据失败');
    } finally {
      setLoading(false);
    }
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setRequestData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    fetchAccountData();
  };

  return (
    <div className="user-account-data">
      <h2>个人账号数据</h2>
      
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="user_id">用户ID:</label>
          <input
            type="text"
            id="user_id"
            name="user_id"
            value={requestData.user_id}
            onChange={handleInputChange}
            placeholder="请输入用户ID"
          />
        </div>
        <button type="submit" disabled={loading}>
          {loading ? '获取中...' : '获取账号数据'}
        </button>
      </form>

      {error && (
        <div className="error-message">
          错误: {error}
        </div>
      )}

      {accountData && (
        <div className="account-data-display">
          <h3>账号信息</h3>
          <div className="data-item">
            <strong>ID:</strong> {accountData.id}
          </div>
          <div className="data-item">
            <strong>用户名:</strong> {accountData.username || 'N/A'}
          </div>
          <div className="data-item">
            <strong>邮箱:</strong> {accountData.email || 'N/A'}
          </div>
          <div className="data-item">
            <strong>手机号:</strong> {accountData.phone || 'N/A'}
          </div>
          <div className="data-item">
            <strong>创建时间:</strong> {accountData.created_at || 'N/A'}
          </div>
          <div className="data-item">
            <strong>更新时间:</strong> {accountData.updated_at || 'N/A'}
          </div>
        </div>
      )}
    </div>
  );
};

// 添加样式
const styles = `
  .user-account-data {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
  }

  .user-account-data h2 {
    text-align: center;
    color: #333;
  }

  .user-account-data form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
  }

  .user-account-data form div {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .user-account-data label {
    font-weight: bold;
    color: #555;
  }

  .user-account-data input {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
  }

  .user-account-data button {
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .user-account-data button:hover:not(:disabled) {
    background-color: #0056b3;
  }

  .user-account-data button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }

  .error-message {
    padding: 15px;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .account-data-display {
    padding: 20px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
  }

  .account-data-display h3 {
    margin-top: 0;
    color: #333;
  }

  .data-item {
    margin-bottom: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
  }

  .data-item:last-child {
    border-bottom: none;
  }

  .data-item strong {
    color: #555;
    margin-right: 10px;
  }
`;

// 创建并插入样式
const styleSheet = document.createElement('style');
styleSheet.innerHTML = styles;
document.head.appendChild(styleSheet);

export default UserAccountData;